<template>
  <div class="home-page">
    <div class="banner">
      <div class="container">
        <h1>{{ userinfo?.username }} nihao</h1>
        <h1 class="logo-font">conduit</h1>
        <p>A place to share your knowledge.</p>
      </div>
    </div>

    <div class="container page">
      <div class="row">
        <div class="col-md-9">
          <div class="feed-toggle">
            <ul class="nav nav-pills outline-active">
              <li class="nav-item" @click.prevent="OnFeedClick()">
                <a class="nav-link" :class="{ active: isFeedActive }" href="">Your Feed</a>
              </li>
              <li class="nav-item" @click.prevent="OnGlobalClick()">
                <a class="nav-link" :class="{ active: isGlobalActive }" href="">Global Feed</a>
              </li>
            </ul>
          </div>

          <div class="article-preview" v-for="(value, index) in multi_articles.articles">
            <div class="article-meta">
              <RouterLink :to="{ name: 'profile', params: { username: value.author.username } }"><img
                  :src="value.author.image" /></RouterLink>
              <div class="info">
                <RouterLink :to="{ name: 'profile', params: { username: value.author.username } }" class="author">{{
                  value.author.username }}</RouterLink>
                <span class="date">{{ value.updatedAt }}</span>
              </div>
              <button class="btn btn-outline-primary btn-sm pull-xs-right"
                @click="shiftFavorite(value.favorited, index)">
                <i class="ion-heart"></i> {{ value.favoritesCount }}
              </button>
            </div>
            <RouterLink :to="{ name: 'article', params: { slug: value.slug } }" class="preview-link">
              <h1>{{ value.title }}</h1>
              <p>{{ value.description }}</p>
              <span>Read more...</span>
              <ul class="tag-list">
                <li class="tag-default tag-pill tag-outline" v-for="tag in value.tagList">{{ tag }}</li>
                <!-- <li class="tag-default tag-pill tag-outline">implementations</li> -->
              </ul>
            </RouterLink>
          </div>

          <!-- <div class="article-preview">
          <div class="article-meta">
            <a href="/profile/albert-pai"><img src="http://i.imgur.com/N4VcUeJ.jpg" /></a>
            <div class="info">
              <a href="/profile/albert-pai" class="author">Albert Pai</a>
              <span class="date">January 20th</span>
            </div>
            <button class="btn btn-outline-primary btn-sm pull-xs-right">
              <i class="ion-heart"></i> 32
            </button>
          </div>
          <a href="/article/the-song-you" class="preview-link">
            <h1>The song you won't ever stop singing. No matter how hard you try.</h1>
            <p>This is the description for the post.</p>
            <span>Read more...</span>
            <ul class="tag-list">
              <li class="tag-default tag-pill tag-outline">realworld</li>
              <li class="tag-default tag-pill tag-outline">implementations</li>
            </ul>
          </a>
        </div> -->

          <ul class="pagination">
            <li class="page-item active">
              <a class="page-link" href="">1</a>
            </li>
            <li class="page-item">
              <a class="page-link" href="">2</a>
            </li>
          </ul>
        </div>

        <div class="col-md-3">
          <div class="sidebar">
            <p>Popular Tags</p>

            <div class="tag-list">
              <a href="" class="tag-pill tag-default" v-for="item in tag_info.tags">{{ item }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { MultiArticles, Tag } from '../models';
import axios from '../utils/request';
import { onMounted, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useUserStore } from '../store/user';


let store = useUserStore();
const { userinfo } = storeToRefs(store);

let tag_info = ref<Tag>({
  tags: []
})

let isFeedActive = ref<boolean>(false)
let isGlobalActive = ref<boolean>(true)


function OnFeedClick() {
  isFeedActive.value = true;
  isGlobalActive.value = false;
  axios.get('/articles/feed').then(res => {
    multi_articles.value = res.data;
    // console.log(res.data);
  })


}
function OnGlobalClick() {
  isFeedActive.value = false;
  isGlobalActive.value = true;
  axios.get('/articles').then(res => {
    multi_articles.value = res.data;
    // console.log(res.data);
  })
}

let multi_articles = ref<MultiArticles>({
  articles: [],
  articlesCount: 0
})


function shiftFavorite(favorited: boolean, index: number) {
  if (favorited === false) {
    axios.post(`/articles/${multi_articles.value.articles[index].slug}/favorite`).then(res => {
      multi_articles.value.articles[index] = res.data;
    })
  } else {
    axios.delete(`/articles/${multi_articles.value.articles[index].slug}/favorite`).then(res => {
      multi_articles.value.articles[index] = res.data;
    })
  }
  axios.get('/articles').then(res => {
    multi_articles.value = res.data;
    // console.log(res.data);
  })
}
onMounted(() => {
  axios.get('/tags').then(res => {
    tag_info.value = res.data;
  })

  axios.get('/articles').then(res => {
    multi_articles.value = res.data;
    // console.log(res.data);
  })
})


</script>
<style scoped></style>
